<template>
	<view class="container">
		<!-- 1. 顶部固定区域 -->
		<view class="top-fixed">
			<!-- 搜索栏 -->
			<view class="search-bar">
				<uni-icons type="search" size="20" color="#999"></uni-icons>
				<input class="search-input" placeholder="搜索感兴趣的课程或主播" placeholder-style="color:#bbb" />
			</view>
			<!-- 分类导航 -->
			<scroll-view class="category-nav" scroll-x="true" :show-scrollbar="false" :scroll-into-view="'category-' + activeCategoryIndex">
				<view
                    :id="'category-' + index"
					v-for="(category, index) in categories"
					:key="index"
					:class="['category-item', { active: activeCategoryIndex === index }]"
					@click="changeCategory(index)"
				>
					<text class="category-text">{{ category }}</text>
				</view>
                <!-- 增加一个右侧空白，防止最后一个分类紧贴边缘 -->
                <view style="display: inline-block; width: 25rpx;"></view>
			</scroll-view>
		</view>

		<!-- 页面内容区域 -->
		<view class="content-area">
			<!-- 2. 轮播图 -->
			<swiper class="carousel" :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.4)" indicator-active-color="#ffffff" :autoplay="true" :interval="3000" :duration="500" circular>
				<swiper-item v-for="(color, index) in carouselColors" :key="index">
					<view class="swiper-item-view" :style="{ backgroundColor: color }">
                        <!-- 可以在这里放一些推广文字或图片 -->
                        <text>广告位 {{ index + 1 }}</text>
                    </view>
				</swiper-item>
			</swiper>

			<!-- 3. 直播内容网格 -->
            <view class="section-title">热门直播</view>
			<view class="live-grid">
				<view class="live-card" v-for="(item, index) in liveStreams" :key="index" @click="gotoLiveRoom(item)">
					<view class="preview-image-wrapper">
                        <view class="preview-image">
                            <!-- 实际项目中替换为 <image> 标签 -->
                            <uni-icons type="videocam-filled" size="50" color="#ccc"></uni-icons>
                            <text class="placeholder-text">直播预览</text>
                        </view>
                        <view class="live-status">直播中</view>
                        <view class="viewers-count">
                            <uni-icons type="eye-filled" size="14" color="#fff"></uni-icons>
                            <text>{{ item.viewers }}</text>
                        </view>
                    </view>
					<view class="live-info">
						<text class="title">{{ item.title }}</text>
						<view class="streamer-info">
                            <view class="avatar-placeholder">
                                <!-- 实际项目中替换为 <image> 标签 -->
                                <uni-icons type="person-filled" size="16" color="#aaa"></uni-icons>
                            </view>
							<text class="streamer-name">{{ item.streamer }}</text>
						</view>
					</view>
				</view>
			</view>
            <!-- 加载更多或没有更多内容的提示 -->
            <view class="load-more">
                <!-- 可以根据实际加载状态显示不同内容 -->
                <text>没有更多直播了</text>
            </view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categories: ['推荐', '游戏', '娱乐', '音乐', '舞蹈', '户外', '美食', '知识', '财经', '科技'], // 增加了几个分类
				activeCategoryIndex: 0,
				carouselColors: ['#a0d911', '#1890ff', '#f5222d'],
				liveStreams: [
					{ id: 1, viewers: '1.2w', title: '零基础学编程，快速入门实战', streamer: '张老师' },
					{ id: 2, viewers: '8k', title: 'Vue3深入浅出与源码分析', streamer: '前端小王子' },
					{ id: 3, viewers: '5.5k', title: '吉他弹唱教学：流行金曲精选', streamer: '音乐人李四' },
					{ id: 4, viewers: '2.1w', title: '轻松学英语口语，告别哑巴英语', streamer: '王教授' },
                    { id: 5, viewers: '9k', title: 'Python数据分析实战项目演练', streamer: '数据达人' },
                    { id: 6, viewers: '3k', title: '玩转英雄联盟：上分技巧分享', streamer: '游戏主播A' },
                    { id: 7, viewers: '6k', title: '户外徒步：探索山野秘境', streamer: '探险家小明' },
                    { id: 8, viewers: '4.5k', title: '深夜食堂：教你做快手宵夜', streamer: '美食博主B' },
				]
			}
		},
        // 下拉刷新
        onPullDownRefresh() {
            console.log('触发下拉刷新');
            // 这里模拟刷新数据
            setTimeout(() => {
                // 更新数据...
                // 停止下拉刷新动画
                uni.stopPullDownRefresh();
                console.log('刷新完成');
            }, 1500);
        },
        // 触底加载更多
        onReachBottom() {
            console.log('触发上拉加载更多');
            // 这里可以添加加载下一页数据的逻辑
            // 示例：模拟加载，实际应请求API
            // if (this.hasMoreData) {
            //     this.loadMoreLiveStreams();
            // }
        },
		methods: {
			changeCategory(index) {
				this.activeCategoryIndex = index;
				console.log('切换到分类:', this.categories[index]);
                // 实际应用中，这里会根据分类重新加载直播列表
                // this.loadLiveStreamsByCategory(this.categories[index]);
			},
            gotoLiveRoom(item) {
                console.log('跳转到直播间:', item.id, item.title);
                uni.navigateTo({ url:'/pages/zhibo/zhibo'}); // 假设有直播间页面
            },
            handleNavClick(tab) {
                console.log('点击了底部导航:', tab);
                // 如果不使用 tabBar，需要在这里处理页面跳转逻辑
                // 例如: if (tab !== 'index') uni.redirectTo({ url: '/pages/' + tab + '/' + tab });
                // 注意：使用 redirectTo 或 reLaunch 会关闭当前页面，navigateTo 会保留当前页
                uni.showToast({
                    title: `点击了 ${tab}`,
                    icon: 'none'
                });
            }
            // loadLiveStreamsByCategory(category) { ... }
            // loadMoreLiveStreams() { ... }
		}
	}
</script>

<style lang="scss">
	/* 整体容器 */
	.container {
		display: flex;
		flex-direction: column;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		background-color: #f8f9fa; /* 更现代的浅灰背景色 */
		min-height: 100vh;
	}

	/* 顶部固定区域 */
	.top-fixed {
		position: fixed;
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 999;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.07); /* 更明显的阴影 */
	}

	/* 搜索栏 */
	.search-bar {
		display: flex;
		align-items: center;
		padding: 0 25rpx;
		background-color: #f1f3f5; /* 更冷色调的背景 */
		margin: 20rpx 30rpx;
		border-radius: 36rpx;
		height: 70rpx;
		transition: all 0.3s ease;
		border: 1rpx solid rgba(0, 0, 0, 0.03); /* 微妙的边框 */

		&:active {
			background-color: #e9ecef; /* 点击效果 */
			transform: scale(0.98);
		}

		.search-input {
			flex: 1;
			margin-left: 15rpx;
			font-size: 28rpx;
			height: 100%;
			color: #495057; /* 更深的文字颜色 */
		}
	}

	/* 分类导航 */
	.category-nav {
		white-space: nowrap;
		padding: 5rpx 0 20rpx 30rpx;
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;

		.category-item {
			display: inline-flex;
			align-items: center;
			padding: 0 28rpx;
			height: 60rpx; /* 略微增加高度 */
			margin-right: 15rpx;
			font-size: 28rpx;
			color: #495057; /* 更深的文字颜色 */
			border-radius: 30rpx; /* 完全圆角 */
			transition: all 0.3s ease;
			position: relative;
			background-color: #f8f9fa; /* 匹配整体背景色 */
			letter-spacing: 0.5rpx; /* 略微增加字间距 */

			.category-text {
				line-height: 1;
			}

			&.active {
				color: #fff; /* 白色文字 */
				font-weight: 600;
				background-color: #5d7fe6; /* 温和的蓝紫色调 */
				box-shadow: 0 4rpx 10rpx rgba(93, 127, 230, 0.3); /* 增加阴影 */
			}
		}
	}

	/* 内容区域 */
	.content-area {
		padding-top: 200rpx;
	}

	/* 轮播图 */
	.carousel {
		height: 340rpx; /* 进一步增加高度 */
		margin: 25rpx 30rpx;
		border-radius: 20rpx; /* 增加圆角 */
		overflow: hidden;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.12); /* 更明显的阴影 */

		.swiper-item-view {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: white;
			font-weight: bold;
			background-size: cover;
			background-position: center;
			
			/* 渐变背景样式 */
			&:nth-child(1) {
				background: linear-gradient(135deg, #5d7fe6, #8669ed); /* 蓝紫渐变 */
			}
			&:nth-child(2) {
				background: linear-gradient(135deg, #43a4ff, #66ccef); /* 天蓝渐变 */
			}
			&:nth-child(3) {
				background: linear-gradient(135deg, #ff6f91, #ff9671); /* 粉橙渐变 */
			}
		}
	}

	/* 版块标题 */
	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #343a40; /* 更深的文字颜色 */
		padding: 30rpx 30rpx 20rpx;
		letter-spacing: 1rpx; /* 增加字间距 */
		position: relative;
		
		/* 标题左侧装饰条 */
		&::before {
			content: '';
			position: absolute;
			left: 30rpx;
			top: 50%;
			width: 8rpx;
			height: 30rpx;
			background-color: #5d7fe6; /* 匹配活动选项卡颜色 */
			border-radius: 4rpx;
			transform: translateY(-50%);
		}
		
		padding-left: 48rpx; /* 为装饰条留出空间 */
	}

	/* 直播卡片网格 */
	.live-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 25rpx;
		padding: 0 30rpx 20rpx 30rpx;
	}

	/* 直播卡片 */
	.live-card {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
		display: flex;
		flex-direction: column;
		
		&:active {
			transform: scale(0.97);
			box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.04);
		}

		/* 预览图包装器 */
		.preview-image-wrapper {
			width: 100%;
			height: 240rpx; /* 再增加一点高度 */
			position: relative;
			overflow: hidden;

			/* 预览图 */
			.preview-image {
				width: 100%;
				height: 100%;
				background-color: #dee2e6; /* 更协调的灰色背景 */
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #adb5bd;
				transition: transform 0.5s ease;
				
				&:hover {
					transform: scale(1.05); /* 鼠标悬停放大效果 */
				}

				.placeholder-text {
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}

			/* 直播状态标签 */
			.live-status {
				position: absolute;
				top: 12rpx;
				left: 12rpx;
				background: linear-gradient(135deg, #ff6b6b, #ff4757); /* 红色渐变 */
				color: #fff;
				font-size: 22rpx;
				padding: 6rpx 14rpx;
				border-radius: 20rpx;
				font-weight: bold;
				letter-spacing: 0.5rpx;
				box-shadow: 0 2rpx 8rpx rgba(255, 75, 87, 0.3);
			}

			/* 观看人数 */
			.viewers-count {
				position: absolute;
				bottom: 12rpx;
				left: 12rpx;
				background-color: rgba(33, 37, 41, 0.6); /* 半透明深色背景 */
				backdrop-filter: blur(3px); /* 毛玻璃效果 */
				color: #fff;
				font-size: 22rpx;
				padding: 6rpx 14rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;

				uni-icons {
					margin-right: 8rpx;
				}
				
				text {
					line-height: 1;
				}
			}
		}

		/* 直播信息 */
		.live-info {
			padding: 18rpx 20rpx;
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			/* 标题 */
			.title {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 28rpx;
				color: #343a40;
				line-height: 1.4;
				margin-bottom: 15rpx;
				min-height: 78rpx;
				font-weight: 500; /* 略微加粗 */
			}

			/* 主播信息 */
			.streamer-info {
				display: flex;
				align-items: center;
				margin-top: auto;

				/* 头像占位符 */
				.avatar-placeholder {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
					background-color: #e9ecef;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 12rpx;
					overflow: hidden;
					box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
				}

				/* 主播名字 */
				.streamer-name {
					font-size: 24rpx;
					color: #6c757d;
					line-height: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					flex: 1;
				}
			}
		}
	}

	/* 加载更多提示 */
	.load-more {
		text-align: center;
		color: #868e96;
		font-size: 24rpx;
		padding: 30rpx 0 40rpx;
		letter-spacing: 1rpx;
	}

	/* 底部导航 */
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		border-top: 1rpx solid #f1f3f5;
		z-index: 1000;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		/* 导航项 */
		.nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			color: #868e96;
			flex: 1;
			height: 100%;
			transition: all 0.3s ease;

			uni-icons {
				margin-bottom: 4rpx;
				transition: all 0.3s ease;
			}

			/* 活动状态 */
			&.active {
				color: #5d7fe6; /* 匹配活动选项卡颜色 */

				uni-icons {
					color: #5d7fe6 !important;
					transform: scale(1.1); /* 图标略微放大 */
				}
			}
			
			/* 点击反馈 */
			&:active {
				opacity: 0.7;
				transform: scale(0.95);
			}
		}
	}
	
	/* 自定义动画效果 */
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	
	.live-card {
		animation: fadeIn 0.5s ease;
	}
</style>
